<template>
  <div class="app-container">
    <!-- 50是每一栏之间的间隔 -->
    <el-row :gutter="50">

      <el-col :span="10">
       <el-card :body-style="{ padding: '10px' }" style="background-color: snow;" shadow="always">
          <div style="padding: 5px; color: black;">恶意域名IP空间分布情况</div>
          <div class="chinaMap" ref="chinaMap" style="width: 500px;height: 450px;background-color: snow;"></div>
        </el-card>
      </el-col>

      <el-col :span="12" >
        <el-card :body-style="{ padding: '10px' }" shadow="always">
          <div style="padding: 5px; color: black;">恶意域名分布城市TOP{{this.len}}</div>
          <div ref="chart" style="width: 600px;height: 480px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>


</template>
<script>
import echarts from 'echarts';
import 'echarts/map/js/china.js'
import resize from '@/views/dashboard/components/mixins/resize'


export default {
  data() {
    return {
      tableData:[
           { name: '北京', value: 20 },
           { name: '天津', value: 120 },
           { name: '上海', value: 150 },
           { name: '重庆', value: 167 },
           { name: '河北', value: 15 },
           { name: '河南', value: 150 },
           { name: '云南', value: 5 },
           { name: '辽宁', value: 142 },
           { name: '黑龙江', value: 15 },
           { name: '湖南', value: 20 },
           { name: '安徽', value: 15 },
           { name: '山东', value: 15 },
           { name: '新疆', value: 3 },
           { name: '江苏', value: 289 },
           { name: '浙江', value: 250 },
           { name: '江西', value: 150 },
           { name: '湖北', value: 40 },
           { name: '广西', value: 40 },
           { name: '甘肃', value: 10 },
           { name: '山西', value: 15 },
           { name: '内蒙古', value: 15 },
           { name: '陕西', value: 90 },
           { name: '吉林', value: 8 },
           { name: '福建', value: 90 },
           { name: '贵州', value: 9 },
           { name: '广东', value: 200 },
           { name: '青海', value: 3 },
           { name: '西藏', value: 9 },
           { name: '四川', value: 190 },
           { name: '宁夏', value: 15 },
           { name: '海南', value: 7 },
           { name: '台湾', value: 210 },
           { name: '香港', value: 270 },
           { name: '澳门', value: 150 }
           ],

      len: 10,
    }
  },
  mounted() {
    this.initCharts()
    this.getData()
  },
  methods: {
     initCharts() {
      let mapcharts = this.$echarts.init(this.$refs.chinaMap);
       //窗口尺寸改变
      window.addEventListener("resize",function(){
        mapcharts.resize();
      })

      // 绘制图表
      mapcharts.setOption({
        series: [{
           type: 'map',
           map: 'china',
           layoutCenter: ['50%', '55%'], // 地图布局中心点
           layoutSize: 270,
           label: {
            show: true,
            color: '#000000',
            fontSize: 10,
           },
           itemStyle: {
               areaColor: '#eee',
               borderColor: '#24dafe',
           },
           roam: true,
           zoom: 1.6,
           emphasis: {
            label: {
                color: '#000000',
                fontSize: 12,
                fontWeight:'bold'
            },
            itemStyle: {
                areaColor: 'none',
                borderColor: '#005500',
                borderWidth: 2
            }
           },
           data: this.tableData,

           /*// { name: '北京', value: 17 },
           // { name: '天津', value: 12 },
           // { name: '上海', value: 15 },
           // { name: '重庆', value: 15 },
           // { name: '河北', value: 15 },
           // { name: '河南', value: 15 },
           // { name: '云南', value: 5 },
           // { name: '辽宁', value: 15 },
           // { name: '黑龙江', value: 15 },
           // { name: '湖南', value: 2 },
           // { name: '安徽', value: 15 },
           // { name: '山东', value: 15 },
           // { name: '新疆', value: 3 },
           // { name: '江苏', value: 3 },
           // { name: '浙江', value: 9 },
           // { name: '江西', value: 15 },
           // { name: '湖北', value: 4 },
           // { name: '广西', value: 4 },
           // { name: '甘肃', value: 10 },
           // { name: '山西', value: 15 },
           // { name: '内蒙古', value: 15 },
           // { name: '陕西', value: 9 },
           // { name: '吉林', value: 8 },
           // { name: '福建', value: 9 },
           // { name: '贵州', value: 9 },
           // { name: '广东', value: 8 },
           // { name: '青海', value: 3 },
           // { name: '西藏', value: 9 },
           // { name: '四川', value: 0 },
           // { name: '宁夏', value: 15 },
           // { name: '海南', value: 7 },
           // { name: '台湾', value: 4 },
           // { name: '香港', value: 4 },
           // { name: '澳门', value: 3 }*/
        }],
        visualMap: [{
          type: 'piecewise',
          show: true,
          pieces: [
              { min: 0, max:50 },
              { min: 51, max: 100 },
              { min: 101, max: 150},
              { min: 151},
          ],
          textStyle: {
             color: '#828994'
          },
          itemWidth: 64, // 每个图元的宽度
          itemHeight:12,
          top: "top",
          right: "0",
          inRange: {
              borderRadius: 4,
              color: [
                  '#84bbff',
                  '#70b4ff',
                  '#61a7ff',
                  '#4d90f2',
              ]
          },
        }],
        tooltip: {
          trigger: 'item',  //数据项图形触发
          backgroundColor: "#00557f",
          borderWidth: 0,
          formatter: '地区：{b}<br/>数据：{c}'
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          bottom: '0',
          feature: {
              restore: {},
              saveAsImage: {}
          }
        },
      });
     },

     getData() {
       let chartDom = echarts.init(this.$refs.chart);

        let x = this.tableData
        x.sort((a, b) => b.value - a.value);
        let top10 = x.slice(0, this.len);
        let top10Names = top10.map(item => item.name);
        let top10Values = top10.map(item => item.value);

       let option = {
          color: ['#C33632'],
          tooltip: {
              trigger: 'axis',
              axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                  type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              }
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          xAxis: [
              {
                  type: 'category',
                  data: top10Names,
                  axisTick: {
                      alignWithLabel: true
                  }
              }
          ],
          yAxis: [
              {
                  type: 'value'
              }
          ],
          series: [
              {
                  name: '直接访问',
                  type: 'bar',
                  barWidth: '60%',
                  data: top10Values
              }
          ]
        };
        chartDom && chartDom.setOption(option);
        chartDom.resize();
        let sizeFun = () => {
          chartDom.resize();
        };
        window.addEventListener("resize", sizeFun);
        this.$once("hook:beforeDestroy", function () {
          echarts.dispose(chartDom);
        });
     }



   }
}
</script>
<style>

</style>
